<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>用户主页</title>

		<meta name="viewport" content="initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!-- 引入css文件 -->
		<link rel="stylesheet" href="../css/sm.min.css">
		<link rel="stylesheet" href="../css/sm-extend.min.css">
		<link rel="stylesheet" href="../css/iconfont.css">
		<style type="text/css">
			#index {
				margin-top: 0.4rem;
			}
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
			/* 卡片内容加边距 */
			.my-cont{
				padding:.2rem .99rem;
				text-align:center
				
			}
			/* 背景色白色 */
			.page, .page-group{
				background-color: white;
			}
			/* 去掉卡片边距 */
			.card{
				margin: 0;
			}
			.card-content{
				margin: 0.625rem;
			}
			/* 用户字体 */
			.list-block .my-user{
				font-size :0.6rem;
				color:rgb(150,150,150);
			}
			/* 头像圆角 */
			.my-photo img{
				border-radius: 1rem;
			}
			/*商品*/
			.commodity-title{
				font-weight: bold;
				font-size: medium;
			}
			.commodity-price{
				font-weight: bold;
				color: red;
				padding-right: 5rem;
				font-size: medium;
			}
			/* 用户 */
			.user-name{
				font-size :0.6rem;
				color:gray;
			}
			.leavemessage{
				font-size :0.6rem;
			}
			.link{
				font-size :0.6875rem;
				font-weight: bold;
			}
			.name{
				padding-left: 4rem;
			}
			.nickname{
				padding-left: 4rem;
				font-size :small;
			}
			.info{
				color: white;
				padding-left: 1.25rem;
				font-size :medium;
				font-weight: bold;
			}
			/* 跳转连接颜色 */
			a{
				color: inherit;
			}
			a:active{
				color: inherit;
			}
		</style>
		<style type="text/css">
			.infinite-scroll-preloader {
				margin-top: -20px;
			}
		</style>
	</head>
	<body>
		<!-- page 容器 -->
		<div class="page" id="app">
			<!-- 这里是页面内容区 -->
			<div class="content" v-if="user!=null">
				<!-- 顶部用户信息 -->
				<div class="card facebook-card" style="background-color: #C2BE9E;">
					<a class="icon icon-left" @click="goBack" style="color: white;"></a>
				    <div class="card-header no-border">
						<div class="facebook-avatar">
						  <img :src="imgSrc(user.photo)" width="58" height="50">
						</div>
				      <div class="name" style="color: white;" v-if="user.name!='rejectuser'">{{user.name}}</div>
				      <div class="name" style="color: red;" v-if="user.name=='rejectuser'">(该用户已被封禁)</div>
					  <div class="nickname " style="color: white;">昵称：{{user.nickname}}</div>
					  <div class="attention">
					  	<button class="button pull-right" @click="doAttention" v-if="attentionstatus==false"
					  	style="background-color: yellow;color: black;border-color:yellow;">
							<span class="icon iconfont icon-icon_add"></span>
							关注
					  	</button>
						<button class="button pull-right" @click="doAttention" v-else-if="attentionstatus==true"
						style="background-color: #C2BE9E;color: white;border-color:white;">
							已关注
						</button>
					  </div>
				    </div>
					<span class="Introduction" style="color: white;">
						{{user.intro}}<br/>
					</span>
					<div >
						<a @click="goAttention" href="#" class="info">关注</a>
						<a @click="goFans" href="#" class="info">粉丝</a>
					</div>
				</div>
				<!-- 标题框 -->
				<div class="buttons-tab">
				    <a href="#tab1" class="tab-link active button">她的</a>
				    <a href="#tab2" class="tab-link button">评价</a>
			    </div>
			    <div class="content-block">
					<div class="tabs">
						<!-- 发布页 -->
					  <div id="tab1" class="tab active">
						<div class="list-block">
							<div class="list-block media-list" v-for="commodity in commodities">
								<ul>
								  <li>
									<a @click="goCommodity(commodity.id)" class="item-link item-content">
									  <div class="item-media">
										  <img :src="imgSrc(commodity.picture)" style='width: 5rem;'>
										 </div>
									  <div class="item-inner">
										<div class="item-title-row">
										  <div class="item-title">
											  <span class="commodity-title">
												{{commodity.title}}<br/>
											  </span>
										  </div>
										</div>
										<div class="item-subtitle" style="padding-top:10px">
											<span class="commodity-price">
												￥{{commodity.price}}
											</span>
										</div>
										<template v-if="commodity.status==1">
											<div style="background-color: gainsboro;text-align: center;">
												<span>卖掉了</span>
											</div>
										</template>
									  </div>
									</a>
								  </li>
								</ul>
							</div>	
						</div>
					  </div>
					  <!-- 评价页 -->
					  <div id="tab2" class="tab">
						<div class="list-block">
							<div class="card facebook-card addleave-message">
								<div class="card-header " v-for="appraise in appraises">
								  <div class="facebook-avatar">
									  <img :src="imgSrc(appraise.senduser.photo)" width="40" height="40">
									</div>
								  <div class="facebook-name">{{appraise.senduser.nickname}}</div>
								  <div class="facebook-date" >{{appraise.date}}</div>
								  <div>
									<span class="leavemessage">
										{{appraise.appraise}}<br/>
									</span>
								  </div>
								</div>
							</div>
						</div>
					  </div>
					</div>
			    </div>
			</div>
		</div>
		<script src='../js/jquery-3.2.1.min.js'></script>
		<script src='../js/sm.js'></script>
		<script src='../js/sm-extend.js'></script>
		<script src='../js/vue.js'></script>
		<script src='../js/axios.min.js'></script>
		<script src="../js/config.js"></script>
		
		<script type="text/javascript">
			//获取url中的参数
			function getUrlParam(name) {
			var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
			var r = window.location.search.substr(1).match(reg); //匹配目标参数
			if (r != null) return unescape(r[2]); return null; //返回参数值
			 }
		</script>
		
		<script>
			//获取URL参数
			var userid = getUrlParam('userid');
			
			//VUE
			var app = new Vue({
				el:"#app",
				data:{
					user:null,
					loginUser:null,
					commodities:[],
					appraises:[],
					attentionstatus:null
				},
				created() {
					//初始化加载用户信息
					this.inituser();
					//初始化加载登录用户
					this.initloginuser();
					//初始化加载商品数据
					this.initcommodities();
					//初始加载评价
					this.initappraises();
				},
				// 方法
				methods:{
					inituser: function() {
						axios.get(serviceIP+"/market/inituser?userid=" + userid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.user = result.data.data;
						});
					},
					initloginuser: function() {
						axios.get(serviceIP+"/market/initloginuser",{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.loginUser = result.data.data;
							//初始化加载关注状态
							this.initattentionstatus();
						});
					},
					initcommodities: function() {
						axios.get(serviceIP+"/market/initusercommodities?userid=" + userid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.commodities = result.data.data;
						});
					},
					initappraises: function() {
						axios.get(serviceIP+"/market/inituserappraise?userid=" + userid,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.appraises = result.data.data;
							//alert(result.data.code);
						});
					},
					initattentionstatus: function() {
						axios.get(serviceIP+"/market/initattentionstatus?userid=" + userid
								+"&loginuserid="+this.loginUser.id,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
							this.attentionstatus = result.data.data;
							// alert(result.data.data);
							// alert("this.attentionstatus:"+this.attentionstatus);
						});
					},
					
					//跳转到商品页面
					goCommodity:function(id){
						// alert(commodity.user.id);
						window.location="market-commodity.html?commodityid="+id
					},
					//跳转上层打开页面
					goBack:function(){
						// alert(commodity.user.id);
						window.history.go(-1)
					},
					//图片映射
					imgSrc: function(src) {
						return src;
					},
					//关注页面跳转
					goAttention:function(){
						// alert(commodity.user.id);
						window.location="market-attention.html?userid="+this.user.id
					},
					//粉丝页面跳转
					goFans:function(){
						// alert(commodity.user.id);
						window.location="market-fans.html?userid="+this.user.id
					},
					//添加/取消关注
					doAttention:function(){
						var _this = this;
						if(_this.attentionstatus==true){
							$.confirm('确定取消关注？', function() {
								//alert(userid+loginUser.id+attentionStatus);
								axios.get(serviceIP+"/market/changeattentionstatus?userId=" + userid
											+"&loginUserid="+_this.loginUser.id+"&attentionStatus="+_this.attentionstatus,{
							headers:{"token":token,"refreshtoken":refreshtoken}
							}).then(result => {
									if (result.data.code == 200) {
										$.toast("操作成功!");
										_this.attentionstatus = result.data.data;
									} else {
										$.toast("操作被打断，请重试！");
									}
								});
							});
						}
						else{
							axios.get(serviceIP+"/market/changeattentionstatus?userId=" + userid
										+"&loginUserid="+_this.loginUser.id+"&attentionStatus="+_this.attentionstatus,{
							headers:{"token":token,"refreshtoken":refreshtoken}
						}).then(result => {
								if (result.data.code == 200) {
									$.toast("操作成功!");
									_this.attentionstatus = result.data.data;
								} else {
									$.toast("操作被打断，请重试！");
								}
							});
						}
					},
				},
				
			});
		</script>
		
		<script>
			$.init();
		</script>
	</body>

</html>
